<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示/隐藏</title>
</head>
<body>
<div class="err">用户名或则密码错误</div>
<button id="btnShow">显示</button>
<button id="btnHide">隐藏</button>
<button id="btnToggle">切换</button>
</body>
<script src="../0.vendor/jquery-3.6.0.js"></script>
<script>

      /* $('#btnShow').bind('click',function () {
           $('.err').show('slow',function () {
               alert('我出现了！')
           }); // slow,fast ,normal
       })
       $('#btnHide').bind('click',function () {
           $('.err').hide(2000);
       })
       $('#btnToggle').bind('click',function () {
           $('.err').toggle(2000);
       })*/

      /*$('#btnShow').bind('click',function () {
          $('.err').fadeIn('slow',function () {
              alert('我出现了！')
          }); // slow,fast ,normal
      })

      $('#btnHide').bind('click',function () {
          $('.err').fadeOut('3000',function () {
              alert('我消失了！')
          }); // slow,fast ,normal
      })

      $('#btnToggle').bind('click',function () {
          $('.err').fadeToggle(2000);
      })*/


      $('#btnShow').bind('click',function () {
          $('.err').slideDown(2000);
      })

      $('#btnHide').bind('click',function(){
          $('.err').slideUp(2000);
      })

      $('#btnToggle').bind('click',function () {
          $('.err').slideToggle(2000);
      })
</script>
</html>